<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            overflow: auto;
            background-color: #bfa;
            /* background-image设置背景图片
               可以同时设置背景颜色和背景图片，这样背景颜色会成为图片的背景色
               如果背景的图片小于元素则背景图片会自动在元素中平铺堆满
               如果背景的图片大于元素，将会无法完全显示
              */
            background-image: url(./img/river.jpg);
            /* background-repeat: 用来设置背景双方向的重复方式 
            可选值
                 repeat    默认值  沿着x轴，y轴双向重复
                 repeat-x   沿着x轴方向重复
                 repeat-y  沿着有方向重复
                 no-repeat  背景图，不重复
                 */
            background-repeat: no-repeat;
            /* background-position: 设置图片位置
                   通过top left right bottom center 几个方位来设置图片在元素的位置
                   使用方位时，必须同时指定两个值，如果只写一个则第二个值默认是center

                   通过偏移量来指定图片的位置
                   水平方向偏移量   垂直方向的偏移量
                  */
            /* background-clip  设置背景范围 
                  可选值  
                    border-box  默认值 ，背景会出现在边框的下边
                    padding -box  背景不会出现在边框，只出现在内容区和内边距
                    content-box 背景只会出现在内容区
                   */
            /* background-origin: 
                         背景偏移量的计算源点
                        padding-box    默认值,background-position从内边距开始计算
                        content-box       背景图片的偏移量从内容区处计算
                        border-box        背景图片的设置从边框处开始计算
                    */
            /* background-origin: border-box;
                  background-clip: content-box;
                  border: 10px red double; */
            /* background-size:  背景图片的尺寸
                  第一个值表示宽度
                  第二个值表示高度
                      如果只写一个，则第二个值默认auto

                      cover 图片比例不变，将元素铺满
                      contain  图片比例不变，将图片在元素中完整显示
                  */
            background-size: 100% auto;

        }

        .box2 {
            width: 300px;
            height: 1000px;
            background-color: orange;
            background-image: url('./img/squirrel.jpg');
            background-size: 100px 100px;
            background-repeat: no-repeat;
            /*  background-attachment
                    背景图片是否随元素移动
                    scroll    默认值背景图片会随着元素移动
                    fixed      背景会固定在页面中，不会随元素移动
             */
            background-attachment: scroll;
        }

        .box3 {
            border: 10px red double;
            padding: 50px;
            width: 500px;
            height: 500px;
            /* background  背景相关属性的样式都可以通过该样式来设置
            并且没有顺序要求 ，也没有那个属性必须写
            
            注意
             background-size 必须写在background-position后边并且使用/隔开
             background-position/background-size
              
              background-origin  background-clip两个样式orgin要在clip前边
             */
            background: #bfa url('./img/dog.jpg') center center/contain content-box no-repeat;
        }
    </style>
</head>

<body>
    <!-- <div class="box1">
        <div class="box2"></div>
    </div> -->
    <div class="box3"></div>
</body>

</html>